<template>
  <echarts class="bi-bar" ref="echartRef" />
</template>
<script setup>
import echarts from "@/components/echarts/index.vue"
import { echartsDataset, options } from "@/components/echarts/echarts"
import { commonStyle } from "@/hooks/userEditor"
import { gradientColor } from "@/utils/util"
const attrs = useAttrs()
const option = attrs.option
let { dimension, measure } = attrs.data
const echartRef = ref(null)
let setOptions = {}
let dataset = {
  dimensions: [],
  source: []
}
const init = () => {
  const settings = g.Copy(option)
  setOptions = options(settings)
  setOptions.tooltip.trigger = "item"
  const seriesPieLabel = settings.label
  seriesPieLabel.formatter = "{b}: {d}%"
  if (!option.label.color) {
    seriesPieLabel.color = commonStyle.value.theme === "dark" ? "#fff" : "#000"
  }
  setOptions.series = measure.map((m, i) => {
    return {
      type: "funnel",
      label: seriesPieLabel,
      labelLine: settings.labelLine,
      ...settings.seriesfunnel,
      data: dataset.source.map((item) => {
        if (settings.metrics[item.name]) {
          const colors = gradientColor(settings.metrics[item.name].itemStyle.color).splice(0, 2).filter(Boolean)
          if (colors.length > 1) {
            // 渐变色
            const colorStops = colors.map((item, index) => {
              return {
                offset: index / (colors.length - 1),
                color: item
              }
            })
            settings.metrics[item.name].itemStyle.color = {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops,
              global: false // 缺省为 false
            }
          }
          item.itemStyle = settings.metrics[item.name].itemStyle
          item.label = settings.metrics[item.name].label
        }
        return item
      })
    }
  })
  echartRef.value.init(setOptions)
}
watch(
  attrs.data,
  (val) => {
    dimension = val.dimension
    measure = val.measure
  },
  { deep: true, immediate: true }
)
watch(
  [option, commonStyle],
  () => {
    init()
  },
  { deep: true }
)
// 对外暴露的方法，接收外部传入的数据
const update = (data) => {
  dataset = echartsDataset(data, dimension, measure)
  const obj = {}
  if (dimension.length > 0) {
    dataset.source = dataset.source.map((item) => {
      obj[item[dimension[0].title]] = g.extend(
        {
          name: item[dimension[0].title],
          label: {
            show: true
          },
          itemStyle: {}
        },
        option?.metrics[item[dimension[0].title]]
      )
      return {
        name: item[dimension[0].title],
        value: item[measure[0].title],
        str: measure[0].title
      }
    })
  } else {
    dataset.source = measure.map((item) => {
      obj[item.field] = g.extend(
        {
          name: item.title,
          label: {
            show: true
          },
          itemStyle: {}
        },
        option?.metrics[item.field] || {}
      )
      return {
        name: item.title,
        value: dataset.source[0][item.title],
        str: item.title
      }
    })
  }
  option.metrics = obj
  init()
}
defineExpose({
  update
})

onBeforeUnmount(() => {
  echartRef?.value?.dispose()
})
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
</style>
